<template>
  <view class="container p-t-30">
    
    <view class="boxPanel flex-between m-30">
      <view class="text-bold">售后方式</view>
      <view class="flex-y-center" @click="showType = true">
        <view :class="refundType.name?'txt':'inputs'">{{refundType.name?refundType.name:"请选择"}}</view>
        <u-icon name="arrow-right" color="#788096" size="14"></u-icon>
      </view>
    </view>

    <view class="boxPanel flex-between m-30">
      <view class="text-bold">退款原因</view>
      <view class="flex-y-center" @click="show = true">
        <view :class="reason?'txt':'inputs'">{{reason?reason:"请选择"}}</view>
        <u-icon name="arrow-right" color="#788096" size="14"></u-icon>
      </view>
    </view>
    
    <view class="boxPanel m-l-30 m-r-30 m-b-30">
      <view class="flex-between">
        <text class="text-bold">申请退款金额</text>
        <text class="font-32 text-bold c-origin">¥{{refund_data.refund_money}}</text>
      </view>
      <view class="font-22 c-89">
        不可修改，只退还实际支付金额
      </view>
    </view>
    
    <view class="boxPanel m-l-30 m-r-30 m-b-30">
      <textarea cols="30" rows="5" placeholder="补充描述（选填）" placeholder-class="placeholder" v-model="refund_remark" maxlength="-1"></textarea>
    </view>
    
    <!-- <view class="font-30 text-bold m-l-30 m-r-30 m-b-30">上传凭证</view> -->
    
    
    <!-- <view class="uploadbox">
    	<view class="upload" v-for="(i, t) in imgList" :key="t">
    		<image :src="$util.img(i)" mode="aspectFill" @click="preview(i,t)" class="img"></image>
    		<view class="imgDel" @click="deleteImg(i,t)">
          <image :src="$util.img('image/close.png')" mode=""></image>
        </view>
    	</view>
      <view class="upload" @click="addImg()" v-if="imgList.length < 6 || imgList.length == undefined">
        <image :src="$util.img('image/upload.png')" mode="" class="img"></image>
      </view>
    </view> -->
    
   <view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
     <view class="submit" @click="submit()">申请退款</view>
   </view>
    
    
    <!-- 引入选择退款原因组件 -->
    <refundReason :show="show" @close="show = false" @confirm="confirm" :list="cause_list" v-if="show == true"></refundReason> 
    <!-- 引入退款类型组件 -->
    <refundType :show="showType" @close="showType = false" @confirm="confirmType" :refundType="refund_data.refund_type" v-if="showType == true"></refundType> 

  </view>
</template>

<script>
  import refundType from '../../components/refundType/refundType'
  import refundReason from '../../components/refundReason/refundReason'
  export default {
    components: {
      refundReason,refundType
    },
    data() {
      return {
        refundType: {
          type: '',
          name: '',
        },
        showType: false,

        reason: '',
		show: false,
        cause_list: [],   //退款原因列表
        
        
        refund_remark: '',
        refundInfo: {},
        isIphoneX: false, //判断手机是否是iphoneX以上

        refund_data:{
			refund_type: [],
		}, //退款信息
		order_goods_id: ''

      }
    },
    onLoad(option) {
      this.isIphoneX = this.$util.uniappIsIPhoneX()
      if (option.order_goods_id) this.order_goods_id = option.order_goods_id;
     
      this.getRefundData()
    },
    methods: {
      confirmType(e) {
        console.log(e);
        this.refundType = e;
        this.showType = false;
      },
      confirm(e) {
        this.reason = e;
        this.show = false;
      },
      submit() {
        if(!this.refundType.name) {
          this.$util.showToast({title: "请选择售后类型"});
          return
        }
        if(!this.reason) {
          this.$util.showToast({title: "请选择退款原因"});
          return
        }
        this.$api.sendRequest({
          url: "/api/orderrefund/refund",
          data: {
           	order_goods_ids: this.order_goods_id,
			refund_type: this.refundType.type,
			refund_reason: this.reason,
			refund_remark: this.refund_remark
          },
          success: res => {
            if(res.code >= 0) {
              this.$util.showToast({ title: res.message });
              setTimeout(function() {
                uni.navigateBack();
              },2000)
            }else {
              this.$util.showToast({title: res.message})
            }
          }
        })
      },
      getRefundData() {
        this.$api.sendRequest({
          url: "/api/orderrefund/refundData",
          data: {
			order_goods_id: this.order_goods_id
		  },
          success: res => {
            if(res.code >= 0) {
              this.refund_data = res.data;
			  this.cause_list = res.data.refund_reason_type;
            }else {
              this.$util.showToast({title: res.message})
            }
          }
        })
      },
      
    }
  }
</script>

<style lang="scss" scoped>
.boxPanel {
  margin: 0 24rpx 24rpx;
  padding: 20rpx;
  .inputs {
    font-size: 28rpx;
    color: #B5B9C7;
  }
  .txt {
    font-size: 28rpx;
    font-weight: bold;
  }
  
  textarea {
    height: 300rpx;
  }
}
	
</style>
